<template>
  <div class="category-page">
    <div class="container">
      <div class="page-title mt-4 mb-4">
        <h2>小说分类</h2>
      </div>

      <!-- 分类筛选器 -->
      <div class="filter-section card mb-4">
        <div class="filter-item">
          <div class="filter-label">分类:</div>
          <div class="filter-options">
            <el-radio-group v-model="selectedCategory" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button v-for="category in categories" :key="category.id" :label="category.name">
                {{ category.name }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="filter-item mt-3">
          <div class="filter-label">状态:</div>
          <div class="filter-options">
            <el-radio-group v-model="selectedStatus" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="连载中">连载中</el-radio-button>
              <el-radio-button label="已完结">已完结</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="filter-item mt-3">
          <div class="filter-label">排序:</div>
          <div class="filter-options">
            <el-radio-group v-model="selectedSort" size="small">
              <el-radio-button label="latest">最新更新</el-radio-button>
              <el-radio-button label="hot">人气最高</el-radio-button>
              <el-radio-button label="recommend">推荐榜</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>

      <!-- 书籍列表 -->
      <div class="book-list">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="(book, index) in filteredBooks" :key="index">
            <div class="book-item mb-4">
              <div class="book-cover-wrapper">
                <div class="book-cover-placeholder"></div>
              </div>
              <div class="book-info mt-2">
                <div class="book-title text-ellipsis">{{ book.title }}</div>
                <div class="book-author text-ellipsis text-secondary mt-1">{{ book.author }}</div>
                <div class="book-category text-ellipsis text-secondary mt-1">{{ book.type }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination-container mt-4 mb-5 text-center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="50"
          :page-size="12"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'CategoryPage',
  data() {
    return {
      selectedCategory: 'all',
      selectedStatus: 'all',
      selectedSort: 'latest',
      currentPage: 1,
      books: [
        { id: 1, title: '武道巅峰', author: '遥远的蓝天', type: '传统玄幻', status: '连载中' },
        { id: 2, title: '我有一座恐怖屋', author: '鬼不语', type: '悬疑灵异', status: '连载中' },
        { id: 3, title: '一纸情书', author: '陌上花开', type: '纯爱', status: '已完结' },
        { id: 4, title: '帝国崛起', author: '流浪的土狗', type: '都市日常', status: '连载中' },
        { id: 5, title: '幻想之旅', author: '轻舞飞扬', type: '玄幻脑洞', status: '连载中' },
        { id: 6, title: '星际战舰', author: '星空漫游', type: '科幻未来', status: '已完结' },
        { id: 7, title: '寻找真爱', author: '浪漫烛光', type: '双男主', status: '连载中' },
        { id: 8, title: '百变人生', author: '千变万化', type: '快穿', status: '连载中' },
        { id: 9, title: '都市狂人', author: '风一样的男子', type: '都市脑洞', status: '已完结' },
        { id: 10, title: '修仙之路', author: '八方风雨', type: '传统玄幻', status: '连载中' },
        { id: 11, title: '夜幕下的都市', author: '夜行者', type: '悬疑灵异', status: '连载中' },
        { id: 12, title: '心动瞬间', author: '粉色回忆', type: '纯爱', status: '已完结' }
      ]
    }
  },
  computed: {
    ...mapState(['categories']),
    filteredBooks() {
      let result = [...this.books]
      
      // 按分类筛选
      if (this.selectedCategory !== 'all') {
        result = result.filter(book => book.type === this.selectedCategory)
      }
      
      // 按状态筛选
      if (this.selectedStatus !== 'all') {
        result = result.filter(book => book.status === this.selectedStatus)
      }
      
      // 按排序方式排序
      switch (this.selectedSort) {
        case 'hot':
          // 假设按id的降序为热度排序
          result.sort((a, b) => b.id - a.id)
          break
        case 'recommend':
          // 假设随机排序为推荐
          result.sort(() => Math.random() - 0.5)
          break
        default: // 默认按最新更新排序
          // 这里保持原数组顺序，假设已经是按最新排序的
          break
      }
      
      return result
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      // 真实环境中应该发送请求获取对应页码的数据
    }
  },
  created() {
    // 从路由参数中获取初始分类
    const typeParam = this.$route.query.type
    if (typeParam === 'male' || typeParam === 'female') {
      // 设置对应频道的第一个分类
      if (typeParam === 'male') {
        this.selectedCategory = this.categories[0].name
      } else {
        this.selectedCategory = this.categories[5].name
      }
    }
  }
}
</script>

<style scoped>
.page-title h2 {
  font-size: 26px;
  font-weight: bold;
  color: #333;
}

.filter-section {
  padding: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  width: 70px;
  flex-shrink: 0;
  font-weight: bold;
}

.filter-options {
  flex: 1;
}

.book-cover-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 133%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.book-cover-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.book-title {
  font-weight: bold;
  font-size: 15px;
}

.book-author, .book-category {
  font-size: 13px;
}

.book-item {
  transition: all 0.3s;
}

.book-item:hover {
  transform: translateY(-5px);
}
</style> 